<template>
  <div>
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      :data="questionsList"
      border
      style="width: 100%"
    >
      <el-table-column
        align="center"
        prop="number"
        label="试题编号"
        width="150"
      />
      <el-table-column
        align="center"
        prop="subject"
        label="学科"
        width="120"
      />
      <el-table-column
        align="center"
        prop="catalog"
        label="目录"
        width="120"
      />
      <el-table-column
        align="center"
        prop="questionType"
        label="题型"
        :formatter="FormatterType"
        width="120"
      />
      <el-table-column
        ref="questions"
        align="center"
        prop="question"
        label="题干"
        width="300"
      >
        <template v-slot="{row}">
          <span v-html="row.question" />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="chkDate"
        label="录入时间"
        width="160"
      >
        <template v-slot="{row}">
          {{ row.chkDate | formatDate('yyyy-MM-dd hh:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="difficulty"
        label="难度"
        :formatter="formatterDifficulty"
        width="120"
      />
      <el-table-column
        align="center"
        prop="creator"
        label="录入人"
        width="120"
      />
      <el-table-column
        align="center"
        prop="chkState"
        label="审核状态"
        :formatter="formatterChkState"
        width="120"
      />
      <el-table-column
        align="center"
        prop="chkRemarks"
        label="审核意见"
        width="160"
      />
      <el-table-column
        align="center"
        prop="chkUser"
        label="审核人"
        width="120"
      />
      <el-table-column
        align="center"
        prop="publishState"
        :formatter="formatterPublishState"
        label="发布状态"
        width="120"
      />
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        width="200"
      >
        <template v-slot="{row}">
          <el-button type="text" size="small" @click="handleClick(row)">预览</el-button>
          <el-button type="text" size="small" :disabled="row.chkState !== 0" @click="CheckFn(row)">审核</el-button>
          <el-button type="text" size="small" :disabled=" row.publishState === 1" @click="skipfn(row.id)">修改</el-button>
          <el-button type="text" size="small" @click="putawayfn(row)">{{ row.publishState === 1?'下架':'上架' }}</el-button>
          <el-button type="text" size="small" :disabled=" row.publishState === 1" @click="deletfn(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 审核弹框框 -->
    <QuestionsCheck :dialog-visible.sync="showCheck" :check-id="CheckId" @Parent="Parent" />
    <!-- 预览弹框 -->
    <el-dialog :visible.sync="showPreview" title="题目预览">
      <questionsPreviewVue v-if="showPreview" ref="questionsPreview" @showCodeDialog="showPreview=false" />
    </el-dialog>

  </div>
</template>

<script>

import { difficulty, questionType, publishType } from '@/api/hmmm/constants'
import { choicePublish, remove } from '@/api/hmmm/questions'
import QuestionsCheck from './questions-check.vue'
import questionsPreviewVue from './questions-preview.vue'
export default {
  components: {
    QuestionsCheck,
    questionsPreviewVue
  },
  props: {
    chkState: {
      type: Number,
      default: null
    },
    questionsList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      showCheck: false, // 审核弹框
      CheckId: 0, // 审核id
      showPreview: false, // 预览弹框
      loading: false
    }
  },

  methods: {
    handleClick(data) {
      this.showPreview = true
      this.$nextTick(() => {
        this.$refs.questionsPreview.detail(data)
      })
    },

    // 格式化题型
    FormatterType(row, column, cellValue, index) {
      // row代表每一行的数据
      // console.log(row)
      const obj = questionType.find(item => item.value + '' === row.questionType)
      return obj ? obj.label : '未知'
    },
    // 格式化难度
    formatterDifficulty(row) {
      const obj = difficulty.find(item => item.value + '' === row.difficulty)
      return obj ? obj.label : '未知'
    },
    // 格式化审核状态
    formatterChkState(row) {
      if (row.chkState === 0) {
        return '待审核'
      }
      if (row.chkState === 1) {
        return '已审核'
      }
      if (row.chkState === 2) {
        return '已拒绝'
      }
    },
    // 格式化发布状态
    formatterPublishState(row) {
      if (row.chkState === 1 && row.publishState === 0) {
        return '待发布'
      }
      const obj = publishType.find(item => item.value === row.publishState)
      return obj ? obj.label : '未知'
    },
    // 审核
    async CheckFn(row) {
      console.log(row.chkState)
      this.showCheck = true
      this.CheckId = row.id
    },
    // 上下架
    putawayfn(row) {
      // difficulty===2
      const str = row.publishState === 1 ? '下架' : '上架'
      const publishState = row.publishState === 1 ? 0 : 1
      this.$confirm(`您确认${str}这道题目吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          await choicePublish({ id: row.id, publishState })
          this.$emit('Choice')
          this.$message({
            type: 'success',
            message: `${str}成功!`
          })
        } catch (error) {
          this.$message.error(error)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: `已取消${str}!`
        })
      })
    },
    // 删除题目
    deletfn(id) {
      this.$confirm('此操作将永久删除该题目，是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.loading = true
        try {
          await remove({ id: id })
          this.$emit('Choice')
          this.$message({
            type: 'success',
            message: '删除成功！'
          })
        } catch (error) {
          this.$message.error(error)
        }
        this.loading = false
      })
    },
    Parent() {
      this.$emit('ChkState')
    },
    skipfn(id) {
      this.$router.push({
        path: './new',
        query: {
          id: id
        }
      })
    }

  }

}
</script>
<style>
  .pagetool{
    margin-top: 20px;
  }
</style>
